import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import org.qtproject.qtquick 1.0


import "qrc:/js/resources/Constants.js" as Constant
import "../common"
import "../configure"
import "../page"

MainBasePage {
    id: id_activeCode

    width: 480 * m_ratio
    height: 640 * m_ratio

    m_header.title: "Activation Code..."
    m_header.showBack: true;
    m_header.onBackClicked: {
        console.log("m_header.onBackClicked: ");
        id_pageView.pop();
    }


    anchors.leftMargin: m_margin
    anchors.rightMargin: m_margin
    anchors.topMargin: m_margin
    anchors.bottomMargin: m_margin

    property real m_ratio : ApplicationInfo.ratio
    property real progress: 0
    property int m_margin: 10 * m_ratio

    Item  {
        anchors.top: m_header.bottom;
        width: parent.width
        height: parent.height - m_header.height

        Column {
            width: parent.width
            //height: parent.height

            spacing: 20 * m_ratio

            anchors.verticalCenter: parent.verticalCenter

            Row {
                width: parent.width
                Label {
                    text: "Enter actived code that you recieved from your phone number...!"
                }
            }
            Row {
                width: parent.width
                TextField {
                    id: id_txtActiveCode
                    style: id_touchStyle
                    placeholderText: "Enter actived code"
                    width: parent.width
                    opacity: 0.5

                    onTextChanged: {

                        if (id_txtActiveCode.length === 4) {
                            id_doActivation.enabled = true;

                        } else {
                            id_doActivation.enabled = false;
                        }

                        id_txtActiveCode.opacity = 1

                        if (id_txtActiveCode.length === 0) {
                            id_txtActiveCode.opacity = 0.5
                        }
                    }
                }
            }
            Row {
                width: parent.width
                ButtonDesigne {
                    id: id_doActivation
                    text: "Activation...";
                    width: parent.width

                    enabled: false

                    onClicked: {
                        id_pageView.push(Qt.resolvedUrl("qrc:/Qml/gui/registration/WaitingMakeNewAccount.qml"));
                        ApplicationInfo.onMakeAcountRequest(Constant.m_phone, id_txtActiveCode.text);
                        console.log("ActiveCode.qml  phone" +Constant.m_phone + "   code:" + id_txtActiveCode.text)
                    }
                }
            }
        }

    }

    Component {
        id: id_touchStyle
        TextFieldStyle {
            //textColor: "white"
            //font.pixelSize: 28 *m_ratio
            background: Item {
                implicitHeight: 50 * m_ratio
                implicitWidth: 320 * m_ratio
                BorderImage {
                    source: "qrc:/staticdata/images/textinput.png"
                    border.left: 8 * m_ratio
                    border.right: 8 * m_ratio
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }


    Component {
        id: touchStyle
        ButtonStyle {
            panel: Item {
                implicitHeight: 50 * m_ratio
                implicitWidth: 320 * m_ratio
                BorderImage {
                    anchors.fill: parent
                    antialiasing: true
                    border.bottom: 8 * m_ratio
                    border.top: 8 * m_ratio
                    border.left: 8 * m_ratio
                    border.right: 8 * m_ratio
                    anchors.margins: control.pressed ? -4 : 0
                    source: control.pressed ? "qrc:/staticdata/images/button_pressed.png" : "qrc:/staticdata/images/button_default.png"
                    Text {
                        text: control.text
                        anchors.centerIn: parent
                        color: "white"
                        font.pixelSize: 23 * m_ratio
                        renderType: Text.NativeRendering
                    }
                }
            }
        }
    }

}
